<template>
  <div>
    <el-dialog
      :title="info.isAdd ? '添加' : '编辑'"
      :visible.sync="info.isShow"
      @close="close"
      @opened="opened"
    >
      <div>{{ user }}</div>

      <el-form :model="user" label-width="80px">
        <el-form-item label="一级分类">
          <el-select
            v-model="user.first_cateid"
            @change="changeCateOption"
            placeholder="请选择"
          >
            <el-option
              v-for="item in cateList"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="二级分类">
          <el-select v-model="user.second_cateid" placeholder="请选择">
            <el-option
              v-for="item in secondCateidList"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品名称">
          <el-input v-model="user.goodsname"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="user.price"></el-input>
        </el-form-item>
        <el-form-item label="市场价格">
          <el-input v-model="user.market_price"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <upload-img
            ref="uploadImg"
            @sendFile="user.img = $event"
          ></upload-img>
        </el-form-item>

        <el-form-item label="商品规格">
          <el-select
            v-model="user.specsid"
            placeholder="请选择"
            @change="changeSpecsOption"
          >
            <el-option
              v-for="item in specsList"
              :key="item.id"
              :label="item.specsname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="规格属性">
          <el-select v-model="user.specsattr" multiple placeholder="请选择">
            <el-option
              v-for="item in specsattrList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否新品">
          <el-radio-group v-model="user.isnew">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否热卖">
          <el-radio-group v-model="user.ishot">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="状态">
          <el-switch
            v-model="user.status"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
        <el-form-item label="商品描述">
          <!-- <textarea
            v-model="user.description"
            name=""
            id=""
            cols="30"
            rows="10"
          ></textarea> -->
          <div id="editor"></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="info.isAdd" type="primary" @click="add"
          >添 加</el-button
        >
        <el-button v-else type="primary" @click="update">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import E from "wangeditor";
import path from "path";
import { mapGetters, mapActions } from "vuex";
import {
  reqcatelist,
  reqgoodsadd,
  reqgoodsedit,
  reqgoodsinfo,
} from "../../../http/api";
import { successAlert, errorAlert } from "../../../utils/alert";
import { formClose } from "../../../mixins/index";
export default {
  mixins: [formClose],
  props: ["info"],
  data() {
    return {
      user: {
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        price: "",
        market_price: "",
        img: null,
        description: "",
        specsid: "",
        specsattr: "",
        isnew: 2,
        ishot: 2,
        status: 1,
      },
      //二级分类列表数据
      secondCateidList: [],
    };
  },
  computed: {
    ...mapGetters({ cateList: "cate/list", specsList: "specs/list" }),
    //规格属性
    specsattrList() {
      let obj = this.specsList.find((item) => item.id == this.user.specsid);
      return obj ? obj.attrs : [];
    },
  },
  mounted() {
    //请求分类列表数据
    this.getCateList();
    //请求规格列表数据
    this.getSpecsList(true);
  },
  methods: {
    ...mapActions({
      getGoodsList: "goods/getList",
      getCateList: "cate/getList",
      getSpecsList: "specs/getList",
    }),
    //清空表单
    empty() {
      this.user = {
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        price: "",
        market_price: "",
        img: null,
        description: "",
        specsid: "",
        specsattr: "",
        isnew: 2,
        ishot: 2,
        status: 1,
      };
      this.secondCateidList = [];
      this.$refs.uploadImg.setImgUrl("");
    },
    //获取一条用户信息
    async getOne(id) {
      let { data: res } = await reqgoodsinfo({ id });
      if (res.code == 200) {
        this.user = res.list;
        this.user.id = id;
        //获取二级分类列表
        this.getSecondCateidList();
        //处理规格属性数据
        this.user.specsattr = this.user.specsattr.split(",");
        //给图片赋值
        this.$refs.uploadImg.setImgUrl(this.$pre + this.user.img);
        //给编辑器赋值
        if (this.editor) {
          this.editor.txt.html(this.user.description); // 重新设置编辑器内容
        }
      }
    },
    //添加
    async add() {
      //处理attrsArr数组
      this.user.specsattr = this.user.specsattr.join(",");
      //取出编辑器的值
      this.user.description = this.editor.txt.html();
      let { data: res } = await reqgoodsadd(this.user);
      if (res.code == 200) {
        successAlert(res.msg);
        //添加成功关闭弹窗
        this.info.isShow = false;
        //清空数据
        this.empty();
        //重新请求列表页数据
        this.getGoodsList();
      }
    },
    //修改
    async update() {
      //处理attrsArr数组
      this.user.specsattr = this.user.specsattr.join(",");
      //取出编辑器的值
      this.user.description = this.editor.txt.html();
      let { data: res } = await reqgoodsedit(this.user);
      if (res.code == 200) {
        successAlert(res.msg);
        //添加成功关闭弹窗
        this.info.isShow = false;
        //清空数据
        this.empty();
        //重新请求列表页数据
        this.getGoodsList();
      }
    },
    //监听一级分类改变
    changeCateOption() {
      console.log(this.user.first_cateid);
      this.user.second_cateid = "";
      this.getSecondCateidList();
    },
    //监听商品规格改变
    changeSpecsOption() {
      this.user.specsattr = "";
    },
    //获取二级分类列表
    async getSecondCateidList() {
      let { data: res } = await reqcatelist({ pid: this.user.first_cateid });
      if (res.code == 200) {
        this.secondCateidList = res.list ? res.list : [];
      }
    },
    opened() {
      //创建编辑器
      if (!this.editor) {
        this.editor = new E("#editor");
        this.editor.create();
      }
      this.editor.txt.html(this.user.description);
    },
  },
};
</script>
<style scoped lang="less">
@import "../../../less/index.less";
.goodsAttrBox {
  display: flex;
}
</style>